{extend name="Public:base" /}

{block name="header"}
	{load href="__CSS__/index.css" /}
{/block}

{block name="main"}
	<div class="section s2" style="background:url('__IMG__/index_about.jpg') center no-repeat;background-size:cover;">
		<div class="table">
			<div class="table-cell">
				<div class="container index-about">
					<div class="index-title">
						<div class="h">COMPANY PROFILE</div>
						<h2>公司简介</h2>
						<span></span>
					</div>
					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
							<div class="img">
								<img src="{$block[1]}" alt="">
							</div>
						</div>
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
							<div class="text">
								{$block[2]}
								<a href="{$Cats[1]['url']}" class="more">MORE <img src="__IMG__/icon_right.png" alt=""></a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="section s3" style="background:url('__IMG__/tz_bc.jpg') center no-repeat;background-size:cover;">
		<div class="table">
			<div class="table-cell">
				<div class="container index-tz">
					<div class="index-title">
						<div class="h">PROJECT STATISTICS</div>
						<h2>投资案例</h2>
						<span></span>
					</div>
					<div class="content">
						<div class="tab">
							<ol>
								<li class="active">
									<a href="javascript:;">地产投资</a>
								</li>
								<li>
									<a href="javascript:;">股权投资</a>
								</li>
								<li>
									<a href="javascript:;">产业投资</a>
								</li>
							</ol>
							<ul>
								<li class="active">
									<div class="sepbanner sepbanner-1">
										<div class="sepbanner-content">
											{php}$slide = getSlide(3);{/php}
											{volist name="slide" id="r" key="i"}
											<div class="item item-{$i}">
												<a href="{$r.link}"><img src="{$r.pic}" alt=""></a>
												<p>{$r.title}</p>
											</div>
											{/volist}
										</div>
										<div class="bind-sct bind-pert"></div>
										<div class="bind-sct bind-next"></div>
									</div>
								</li>
								<li>
									<div class="sepbanner sepbanner-2">
										<div class="sepbanner-content">
											{php}$slide = getSlide(5);{/php}
											{volist name="slide" id="r" key="i"}
											<div class="item item-{$i}">
												<a href="{$r.link}"><img src="{$r.pic}" alt=""></a>
												<p>{$r.title}</p>
											</div>
											{/volist}
										</div>
										<div class="bind-sct bind-pert"></div>
										<div class="bind-sct bind-next"></div>
									</div>
								</li>
								<li>
									<div class="sepbanner sepbanner-3">
										<div class="sepbanner-content">
											{php}$slide = getSlide(6);{/php}
											{volist name="slide" id="r" key="i"}
											<div class="item item-{$i}">
												<a href="{$r.link}"><img src="{$r.pic}" alt=""></a>
												<p>{$r.title}</p>
											</div>
											{/volist}
										</div>
										<div class="bind-sct bind-pert"></div>
										<div class="bind-sct bind-next"></div>
									</div>
								</li>
								
								{php}$slide = getSlide(3);{/php}
								<div class="swiper-container" id="case-swiper">
								    <div class="swiper-wrapper">
								    	{volist name="slide" id="r"}
								      <div class="swiper-slide">
								        <div class="img">
								          <img src="{$r.pic}" alt="">
								          <p><span>{$r.link}</span> | {$r.title}</p>
								        </div>
								      </div>
								      {/volist}
								    </div>
								    <!-- Add Arrows -->
								    <div class="swiper-button-next"></div>
								    <div class="swiper-button-prev"></div>
								  </div>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
		    var S3= $('.s3 .table .table-cell');
		    var S3_height = S3.find('.container').height();
		    S3.height(S3_height);
		</script>
		{php}$slide = getSlide(3);{/php}
		<script>
			var slide_3 = {
				0:{
					id:'{$slide[0].id}',
					title:'{$slide[0].title}',
					link:'{$slide[0].link}',
					pic:'{$slide[0].pic}',
				},
				1:{
					id:'{$slide[1].id}',
					title:'{$slide[1].title}',
					link:'{$slide[1].link}',
					pic:'{$slide[1].pic}',
				},
				2:{
					id:'{$slide[2].id}',
					title:'{$slide[2].title}',
					link:'{$slide[2].link}',
					pic:'{$slide[2].pic}',
				}
			}

			$('.index-tz .tab ol li').eq(0).click(function(){
				var htmls = slide_3;
			  	var html = '';
			  
				  for(var i=0;i<3;i++){
				  	$('#case-swiper .swiper-slide').eq(i).find('a').attr('src',htmls[i].src);
				    $('#case-swiper .swiper-slide').eq(i).find('.img img').attr('src',htmls[i].pic);
				    $('#case-swiper .swiper-slide').eq(i).find('p').html(htmls[i].title)
				  }
			})
			
		</script>

		{php}$slide = getSlide(5);{/php}
		<script>
			var slide_5 = {
				0:{
					id:'{$slide[0].id}',
					title:'{$slide[0].title}',
					link:'{$slide[0].link}',
					pic:'{$slide[0].pic}',
				},
				1:{
					id:'{$slide[1].id}',
					title:'{$slide[1].title}',
					link:'{$slide[1].link}',
					pic:'{$slide[1].pic}',
				},
				2:{
					id:'{$slide[2].id}',
					title:'{$slide[2].title}',
					link:'{$slide[2].link}',
					pic:'{$slide[2].pic}',
				}
			}

			$('.index-tz .tab ol li').eq(1).click(function(){
				var htmls = slide_5;
			  	var html = '';
			  
				  for(var i=0;i<3;i++){
				  	$('#case-swiper .swiper-slide').eq(i).find('a').attr('src',htmls[i].src);
				    $('#case-swiper .swiper-slide').eq(i).find('.img img').attr('src',htmls[i].pic);
				    $('#case-swiper .swiper-slide').eq(i).find('p').html(htmls[i].title)
				  }
			})
		</script>

		{php}$slide = getSlide(6);{/php}
		<script>
			var slide_6 = {
				0:{
					id:'{$slide[0].id}',
					title:'{$slide[0].title}',
					link:'{$slide[0].link}',
					pic:'{$slide[0].pic}',
				},
				1:{
					id:'{$slide[1].id}',
					title:'{$slide[1].title}',
					link:'{$slide[1].link}',
					pic:'{$slide[1].pic}',
				},
				2:{
					id:'{$slide[2].id}',
					title:'{$slide[2].title}',
					link:'{$slide[2].link}',
					pic:'{$slide[2].pic}',
				}
			}

			$('.index-tz .tab ol li').eq(2).click(function(){
				var htmls = slide_6;
			  	var html = '';
			  
				  for(var i=0;i<3;i++){
				  	$('#case-swiper .swiper-slide').eq(i).find('a').attr('src',htmls[i].src);
				    $('#case-swiper .swiper-slide').eq(i).find('.img img').attr('src',htmls[i].pic);
				    $('#case-swiper .swiper-slide').eq(i).find('p').html(htmls[i].title)
				  }
			 })


			var swiper = new Swiper('#case-swiper', {
			    navigation: {
			      nextEl: '.swiper-button-next',
			      prevEl: '.swiper-button-prev',
			    },
			  });
		</script>
	</div>


	<div class="section s4" style="background:url('__IMG__/new_bc.jpg') center no-repeat;background-size:cover;">
		<div class="table">
			<div class="table-cell">
				<div class="container index-new">
					<div class="index-title">
						<div class="h">NEWS CENTER</div>
						<h2>新闻中心</h2>
						<span></span>
					</div>
					<div class="content">
						<div class="row">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-5">
								{cp:list catid="11" id="r" posid="1" limit="1" field="url,create_time,thumb,title,description"}
								<div class="new-item-posid">
									<div class="img">
										<a href="{$r.url}"><img src="{$r.thumb}" alt=""></a>
										<div class="time">
											<h3>{$r.create_time|toDate=###,'d'}</h3>
											<p>{$r.create_time|toDate=###,'Y-m'}</p>
										</div>
									</div>
									<div class="text">
										<h3><a href="{$r.url}">{$r.title|str_cut=###,40}</a></h3>
										<p>{$r.description|str_cut=###,100}</p>
									</div>
								</div>
								{/cp:list}
							</div>
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 small-hidden">
								<div class="lists">
									<ul>
										{cp:list catid="11" id="r" posid="1" limit="5" field="url,create_time,title,description" key="i"}
										{if condition="$i==1"}
										<li class="first">
											<div class="text">
												<h3><a href="{$r.url}">{$r.title|str_cut=###,40}</a></h3>
												<p>{$r.description|str_cut=###,100}</p>
											</div>
											<div class="time">
												<h4>{$r.create_time|toDate=###,'m-d'}</h4>
												<span></span>
												<p>{$r.create_time|toDate=###,'Y'}</p>
											</div>
										</li>
										{/if}
										{if condition="$i!=1"}
										<li class="li">
											<h3><a href="{$r.url}">{$r.title|str_cut=###,40}</a></h3>
											<div class="time">{$r.create_time|toDate=###,'Y-m-d'}</div>
										</li>
										{/if}
										{/cp:list}
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{/block}